<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>

	<head>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

		<meta charset="UTF-8">
		<meta charset="UTF-8">
		<title>评价服务</title>
		<link rel="stylesheet" href="${BASE_PATH}/static/app/css/reset.css" />
		<link rel="stylesheet" href="${BASE_PATH}/static/app/css/message.css" />
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/header.css"/>
		<style>　　
			 .active {
	            padding: 0;
	            margin: 0;
	        }
	
	        .comment {
	            font-size: 30px;
	            color: #f797b7;
	            display: inline-block;
    			vertical-align: -.4rem;
	        }
	
	        .comment li {
	            float: left;
	            cursor: pointer;
	            
	        }
	
	         ul {
	            list-style: none;
	        } 
	        .container {
			    width: 100%;
			    margin-top: 40px;
			}
			
		</style>
	</head>

	<body>
		<header>
			<div class="header" >
				<span class="back" onclick="history.go(-1);"></span>
				<a href="${BASE_PATH}/index"><span class="logo_pic"></span></a>
				<span class="logo_text">OK 妈咪</span>
			</div>
		</header>
		<div class="container">
		
			<div class="goods">
				<img src="${BASE_PATH}/static/app/img/20180524.jpg" />
				<div class="goods-name">
					<p>${store.store_name }</p>
					<p>${store.address }</p>
				</div>
			</div>
			<div class="warp">
				<input id="js" type="text" hidden="hidden" value="0">
				<div class="active">
					<span class="active-title">手法技术</span>
					<ul class="comment">
					    <li class="js1">☆</li>
					    <li class="js2">☆</li>
					    <li class="js3">☆</li>
					    <li class="js4">☆</li>
					    <li class="js5">☆</li>
					</ul>
				</div>
				<div class="active">
					<input id="fw" type="text" hidden="hidden" value="0">
					<span class="active-title">服务态度</span>
					<ul class="comment">
					    <li class="fw1">☆</li>
					    <li class="fw2">☆</li>
					    <li class="fw3">☆</li>
					    <li class="fw4">☆</li>
					    <li class="fw5">☆</li>
					</ul>
	
				</div>
	
				<div class="active-box">
					<span>效果好</span>
					<span>服务满意</span>
					<span>手法娴熟</span>
					<span>态度可亲</span>
			
				</div>
				<div class="warp-textarea">
				    <span id="activeEvaluate"></span>
				    <textarea placeholder="恢复师本次的服务你满意吗?&#10;你希望下次有什么改进?&#10;你的意见很重要哦!" maxlength="50" class="textarea" id="contextdetail"></textarea>				    
				</div>
				<c:if test="${fn:length(detailList) > 0}">
					<c:forEach items="${detailList }" var="detail" varStatus="status">
					
						<div class="project">
							<input id="detail${status.index }" class="singevaluate" type="text" hidden="hidden">
							<span class="active-name">${detail.project_name }</span>
							<div class="active-title ">
								<span class="detail${status.index } one-${detail.project_id }">非常满意</span>
								<span class="detail${status.index } two-${detail.project_id}">较满意</span>
								<span class="detail${status.index } thr-${detail.project_id }">不满意</span>
							</div>
			
						</div>
					</c:forEach>
				</c:if>
			</div>
			<a href="javascript:" class="btn-submit">提交</a>
		</div>
	</body>
	<!-- lib -->
<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="${BASE_PATH}/static/app/js/kit.js"></script>
<script type="text/javascript" src="${BASE_PATH}/static/lib/layer/layer.js"></script>
<script type="text/javascript">
$(function(){
    var shixin = "★";
    var kongxin = "☆";
    $("li").mouseenter(function(){
        $(this).text(shixin).prevAll().text(shixin).end().nextAll().text(kongxin);
    });
    $(".comment").mouseleave(function(){
        $("li").text(kongxin);
        $(".clicked").text(shixin).prevAll().text(shixin);
    });
    $("li").on("click",function(){
    	var value=($(this)[0].classList[0]);
    	if(value.indexOf("js")!=-1){
    		$("#js").val(value.substring(2));
    	}else if(value.indexOf("fw")!=-1){
    		$("#fw").val(value.substring(2));
    	}
        $(this).addClass("clicked").siblings().removeClass("clicked");
    });
});
$(".active-box span").on("click",function(){
	var classname=this.className;
	if(classname==null || classname==""){
		this.setAttribute("class", "active-on");
	}else{
		this.removeAttribute("class");
	}
})
$(".active-title span").on("click",function(){
	var cla=$(this)[0].classList[0];
	var two=$(this)[0].classList[1];
	
    $(".active-title span" ).each(function(){
		if($(this)[0].classList.length==3 && $(this)[0].classList[0]==cla){
			$(this).removeClass("active-title-on"); 
		}
	})     
	$(this).addClass("active-title-on");
    $("#"+cla).val(two);
})
$(".btn-submit").on("click",function(){
	var id="${id}";//服务记录id
	var length="${length}";
	var context="";//标签评价
	$(".active-on").each(function(){
		context+=$(this).html()+",";
	})
	var contextdetail=$("#contextdetail").val();//文本评价
	var singevaluate="";
	$(".singevaluate").each(function(){
		singevaluate+=$(this).val()+",";
	})
	var js=$("#js").val();//技术
	var fw=$("#fw").val();//服务
	var pram={
		id:id,
		context:context,
		contextdetail:contextdetail,
		singevaluate:singevaluate,
		length:length,
		js:js,
		fw:fw
	}
	Kit.ajax.post("${BASE_PATH}/my/myInfo/doevaluates",pram,function(result){
		if(result.flag==1){
			Kit.ui.alert("请选择标签来评价此次服务");
		}else if(result.flag==2){
			Kit.ui.alert("请选择您对项目的评价!");
		}else if(result.flag==3){
			Kit.ui.alert("请选择星星来评价服务师的技术!");
		}else if(result.flag==4){
			Kit.ui.alert("请选择星星来评价服务师的态度!");
		}else if(result.flag==0){
			Kit.ui.toast("评价成功");
			history.go(-1);
		}else{
			Kit.ui.toast("评价失败");
			history.go(-1);
		}
	});
});
 /*点击评价按钮将内容添加到文本框中*/
(function(){
	 var active=document.querySelectorAll(".active-box span"),
		 contextdetail=document.querySelector("#activeEvaluate"),
	     htmls=[];
	for(var i=0;i<active.length;i++){		
		active[i].onclick=function(){
			if(this.className){
				htmls.push(this.innerHTML);
			}else{
				htmls.pop(this.innerHTML);
			}	
				contextdetail.innerHTML=htmls;
		}
	}
})() 

</script>
</html>